@import '~/common/style/index.scss';

$switch-prefix-cls: #{$cui-prefix}-switch;

.#{$switch-prefix-cls}-disabled {
  cursor: not-allowed;
  opacity: 0.4;

  .#{$switch-prefix-cls}-checkbox {
    pointer-events: none;
  }
}

.#{$switch-prefix-cls} {
  display: inline-block;
  position: relative;

  .#{$switch-prefix-cls}-checkbox {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border: 0;
    appearance: none;
    cursor: pointer;
  }

  .#{$switch-prefix-cls}-container {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 15px;
    background: $gray-9;
    z-index: 0;
    margin: 0;
    padding: 0;
    appearance: none;
    border: 0;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
  }

  .#{$switch-prefix-cls}-container::after {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: $gray-10;
    content: "";
    transition: all 0.3s;
  }

  .#{$switch-prefix-cls}-container-checked {
    background-color: $blue-5;
  }

  .#{$switch-prefix-cls}-container-checked::after {
    transform: translateX(16px);
  }

}